<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>React Bootstrap</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="../../../libs/bootstrap/4.0.0-beta.3/bootstrap.min.css" />
    <script src="../../../libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="../../../libs/propper.js/1.13.0/umd/popper.min.js"></script>
    <script src="../../../libs/bootstrap/4.0.0-beta.3/bootstrap.min.js"></script>
    <script src="../../../libs/react/16.2.0/umd/react.production.min.js"></script>
    <script src="../../../libs/react-dom/16.2.0/umd/react-dom.production.min.js"></script>
    <script src="../../../libs/react-router-dom/4.2.2/react-router-dom.min.js"></script>
    <script src="../../../libs/prop-types/15.6.0/prop-types.min.js"></script>
    <script src="../../../libs/react-bootstrap/0.32.0/react-bootstrap.js"></script>

    <script src="../../../../libs/babel-standalone/6.26.0/babel.min.js"></script>

    <script>
        (function () {
            let keys = [];
            for (let key in ReactBootstrap) {
                keys.push(key);
            }
            console.log(keys.join(', '));
        });
        const { Accordion, Alert, Badge, Breadcrumb, BreadcrumbItem, Button, ButtonGroup, ButtonToolbar, Carousel, CarouselItem, Checkbox, Clearfix, CloseButton, ControlLabel, Col, Collapse, Dropdown, DropdownButton, Fade, Form, FormControl, FormGroup, Glyphicon, Grid, HelpBlock, Image, InputGroup, Jumbotron, Label, ListGroup, ListGroupItem, Media, MenuItem, Modal, ModalBody, ModalFooter, ModalHeader, ModalTitle, Nav, Navbar, NavbarBrand, NavDropdown, NavItem, Overlay, OverlayTrigger, PageHeader, PageItem, Pager, Pagination, Panel, PanelGroup, Popover, ProgressBar, Radio, ResponsiveEmbed, Row, SafeAnchor, SplitButton, Tab, TabContainer, TabContent, Table, TabPane, Tabs, Thumbnail, ToggleButton, ToggleButtonGroup, Tooltip, Well, utils } = ReactBootstrap;

    </script>
</head>

<body>
    <div class="container">
        <div class="row">
            <div id="root"></div>
        </div>
        <div class="row">
            <div id='badge'>a</div>
        </div>
        <div id='breadcrumb'></div>
        <div id='buttons'></div>
        <div id='carousel'></div>
    </div>
</body>
<!--
    carousel
-->
<script type="text/babel" src="js/alert.jsx"></script>
<script type="text/babel" src="js/badge.jsx"></script>
<script type="text/babel" src="js/breadcrumb.jsx"></script>
<script type="text/babel" src="js/button.jsx"></script>
<script type="text/babel" src="js/carousel.jsx"></script>

</html>